<template>
	<div class="search flex-page-wrapper" :class="En ? (userInfo.personType + '-en') : userInfo.personType" @click="closeMenu">
		<uni-nav-bar statusBar color="#fff" backgroundColor="#1E234B" title="个人中心">
		</uni-nav-bar>
		<div class="flex-page">
			<div v-if="userInfo && userInfo.name" class="voucher1" :style="{ backgroundImage: bgImg }">
				<div class="voucher1-time" v-if="['vvip_guest', 'vip_guest', 'media', 'major', 'forum_invited_major'].includes(userInfo.personType)"></div>
				<div class="voucher1-1">
					<div class="item">
						<div class="small">{{ $t('voucher2') }}</div>
						<div class="big" style="font-size: 32rpx">{{ userInfo.name }}</div>
					</div>
					<div class="item">
						<div class="small">{{ $t('voucher2-1') }}</div>
						<div class="big ellipsis1" style="width: 260rpx;">{{ userInfo.companyName }}</div>
					</div>
				</div>
				<div class="voucher1-1">
					<div class="item">
						<div class="small">{{ $t('voucher4') }}</div>
						<div class="big">{{ userInfo.identityCard }}</div>
					</div>
					<div class="item">
						<div class="small">{{ $t('voucher3') }}</div>
						<div class="big">{{ userInfo.phone }}</div>
					</div>
				</div>
				<div class="voucher1-2">
					<!-- <canvas canvas-id="qrcode" v-if="!qrcodeSrc" :style="{width: `${qrcodeSize}rpx`, height: `${qrcodeSize}rpx`}" /> -->
					<image style="width: 360rpx; height: 360rpx" :src="qrcodeSrc" mode="widthFix"></image>
				</div>
			</div>
			<div class="voucher9"></div>
			<div class="voucher7" @click="exit"><span>{{ $t('voucher8') }}</span></div>
		</div>
		<pub-mask v-if="showError">
			<div class="status-mask">
				<div class="title">
					{{ $t('helper9') }}
				</div>
				<div class="content" style="height: 20px;"></div>
				<div class="btns">
					<div class="btn" @click="showError = false">{{ $t('secdetail3') }}</div>
					<div class="btn on" @click="errorSec">{{ $t('secdetail2-1') }}</div>
				</div>
			</div>
		</pub-mask>
		<pub-mask v-if="showCall">
			<div class="status-mask status-mask1">
				<div class="title">
					客服电话
				</div>
				<div class="content">
					021-22487888
				</div>
				<div class="btns">
					<div class="btn" @click="showCall = false">{{ $t('secdetail3') }}</div>
					<div class="btn on" @click="callFn('021-22487888')">立即拨打</div>
				</div>
			</div>
		</pub-mask>
		<pub-mask v-if="showContact" title="联系我们" @close="showContact = false">
			<div class="status-mask status-mask1">
				<div class="contact-list">
					<div class="contact-item" v-for="(item, index) in contacts" :key="index">
						<div class="title">{{ item['name' + En] }}</div>
						<div class="email">
							{{ item.email }}
							<image @click="copyFn(item.email)" class="icon" src="https://static.inclusionconf.com/static/images/chat/copy.png" mode="widthFix"></image>
						</div>
					</div>
				</div>
			</div>
		</pub-mask>
		<div class="print-mask" @click="showPrintMask = false" v-if="showPrintMask">
			<div class="print" @click.stop="printFn">点击此按钮开始打印</div>
		</div>
		<foot-wap :value="3"></foot-wap>
		<web-tips v-if="showTips"></web-tips>
	</div>
</template>

<script>
	import protal from "@/api/protal"
	import uQRCode from '@/uni_modules/cc-defineQRCode/components/cc-defineQRCode/common/uqrcode.js'
	import JSEncrypt from '../../static/jsencrypt.min.js'

	export default {
		data() {
			const that = this
			return {
				showPrintMask: false,
				showError: false,
				centerDialogVisible: false,
				contacts: [{
						name: '组委会邮箱',
						nameEn: '组委会邮箱',
						email: 'committee@inclusionconf.com'
					},
					{
						name: '合作媒体邮箱',
						nameEn: '合作媒体邮箱',
						email: 'media@inclusionconf.com'
					},
					{
						name: '展商合作邮箱',
						nameEn: '展商合作邮箱',
						email: 'committee@inclusionconf.com'
					},
				],
				swiperOptions: {
					onTransitionEnd: function(swiper) {
						that.activeIndex = swiper.activeIndex
					}
				},
				activeIndex: 0,
				personTypes: [],
				qrcode: null,
				tabs: [{
						big: '碰一下核验通道',
						bigEn: 'Access via Alipay Tap!',
						small: '',
						smallEn: ''
					},
					{
						big: '电子凭证核验通道',
						bigEn: 'Access via e-pass',
						small: '',
						smallEn: ''
					}
				],
				pageNum: 0,
				mlList: [],
				showDom: true,
				scroll: null,
				total: 0,
				userInfo: {},
				bgImg: '',
				typeName: '',
				qrcodeSize: 360,
				qrcodeSrc: '',
				showCall: false,
				showContact: false,
				SN: '',
				vid: '',
				showTips: false,
				carddetail: {}
			}
		},
		onLoad(options) {
			// #ifdef MP-ALIPAY
			console.log(options, '个人中心参数')
			if (options.verifyEventInfo) {
				// const query = JSON.parse(options.query)
				const verifyEventInfo = JSON.parse(options.verifyEventInfo)
				this.SN = verifyEventInfo.SN
				this.vid = verifyEventInfo.vid
				console.log(this.SN, this.vid, '打印一下SN vid')
			}
			// #endif
		},
		async onShow() {
			this.showTips = true
			if (this.SN && this.vid) {
				await protal.vidLogin({ vid: this.getCrypt() }).then(res => {
					if (res.code === '0000') {
						uni.setStorageSync('token', res.data.token)
						this.showPrintMask = true
					}
				})
			}
			protal.getOnlineZdCode('person_type').then(res => {
				this.personTypes = res.data || []
				this.personTypes.push({
					"uuid": "1",
					"sts": 0,
					"createdTime": "2024-06-26 13:24:17",
					"lastUpdatedTime": "2024-06-26 13:24:17",
					"createdBy": null,
					"lastUpdatedBy": null,
					"dictLabel": "大会主办",
					"dictValue": "host",
					"dictSort": 1,
					"dictType": "person_type",
					"defaultTag": 1,
					"status": 0,
					"tag": 1,
					"remark": "",
					"dictLabelEn": "Host"
				})
			})
			await this.getPersonDetail(this)
			this.pageView('waitanh5_personalCenterPage')
			this.getbgImg()
			this.gettypeName()
			// this.make()
			this.generateQrCode()
			this.businesscarddetail()
		},
		onHide() {
			this.showTips = false
		},
		methods: {
			businesscarddetail() {
				protal.businesscarddetail().then(res => {
					this.carddetail = res.data
				})
			},
			printFn() {
				protal.identityPrint(this.SN).then(res => {
					if (res.code == '0000') {
						uni.showToast({
							icon: 'success',
							title: '打印已发送'
						})
						this.showPrintMask = false
					}
				})
			},
			getCrypt() {
				var str = this.vid;
				// 公钥
				var publicKey = "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCCyuMRsaJXsRs/IhUBsQeVU87qpa/ndLmSE0zkEq48K7ADmk/5jlwpP/FLXNn6xCexGOp1MOeSEmOEa6OrLrxS3UI+U8e/dJNoj+QAe2fQPMi73mZQv497P0Q2WaVeW6PSkuaTRSMDJCN2S8c/y+Y+5VmaX6uNOA48uSI/WpXAzwIDAQAB";
				// 加密
				var encrypt = new JSEncrypt();
				encrypt.setPublicKey(publicKey);
				var encryptStr = encrypt.encrypt(str);
				return encryptStr
			},
			agreementFn(v) {
				uni.navigateTo({
					url: '/pages/agreement/index?name=' + v
				})
			},
			copyFn(v) {
				uni.setClipboardData({
					data: v,
					success: function () {
						uni.showToast({
							icon: 'success',
							title: '复制成功'
						})
					}
				});
			},
			callFn(v) {
				uni.makePhoneCall({
					phoneNumber: v
				});
			},
			toBusiness() {
				uni.navigateTo({
					url: '/pages/business/index'
				})
			},
			toBusinessSet() {
				uni.navigateTo({
					url: '/pages/personCard/index'
				})
			},
			generateQrCode() {
				protal.generateQrCode().then(res => {
					this.qrcodeSrc = res.data
				})
			},
			errorSec() {
				protal.exitLogin().then(res => {
					this.showError = false
					uni.removeStorageSync('token')
					// location.href = location.origin
					uni.switchTab({
						url: '/pages/index/index'
					})
				})
			},
			make() {
				// // #ifdef MP-ALIPAY
				// my.createQRCode({
				// 	text: this.userInfo.uuid, // 需要编码的URL或文本
				// 	size: 180, // 二维码大小（单位px）
				// 	success: (res) => {
				// 		this.qrcodeSrc = res.code
				// 		console.log('二维码生成成功:', res.code);
				// 		// 可通过image组件显示二维码
				// 	},
				// 	fail: (err) => {
				// 		console.error('二维码生成失败:', err);
				// 	}
				// });
				// // #endif
				// return
				uQRCode.make({
					canvasId: 'qrcode',
					text: this.userInfo.uuid,
					size: 180,
					margin: 10,
					success: res => {
						this.qrcodeSrc = res
						console.log('qrcodeSrc = ' + this.qrcodeSrc);
					},
					complete: () => {}
				})
			},
			getbgImg() {
				let personType = this.userInfo.personType
				if (personType === 'exhibitors_worker' && this.userInfo.isSponsor) { // 工作人员里面加个类型大会主办
					personType = 'sponsor'
				}
				this.bgImg = `url(https://static.inclusionconf.com/static/images/${personType}-my-t3.png)`
				return
				if (this.userInfo.personType === 'worker' && this.userInfo.isSponsor) {
					this.userInfo.personType = 'host'
				}
				if (this.userInfo.tagSts === 'yes_posted') {
					this.bgImg = `url(https://static.inclusionconf.com/static/images/${this.userInfo.personType}-my.png)`
					return
				}
				this.bgImg = `url(https://static.inclusionconf.com/static/images/${this.userInfo.personType}.png)`
			},
			gettypeName() {
				this.typeName = this.personTypes.find(x => x.dictValue == this.userInfo.personType) || {}
			},
			scFn() {
				this.jsAPI('waitanh5_myCollectionClick')
			},
			nfcFn() {
				this.jsAPI('waitanh5_problemSearch')
			},
			mlFn() {
				this.jsAPI('waitanh5_jiabinListClick')
				this.centerDialogVisible = true
				this.pageNum = 0
				this.mlList = []
				this.queryGuestDirectoryList()
			},
			queryGuestDirectoryList() {
				this.pageNum++
				const params = {
					pageNum: this.pageNum,
					pageSize: 20,
				}
				protal.queryGuestDirectoryList(params).then(res => {
					this.mlList = this.pageNum == 1 ? res.data : [...this.mlList, ...res.data]
				})
			},
			queryGuestDirectoryList() {
				if (this.total && this.pageNum > 0 && this.mlList.length >= this.total) return
				this.pageNum++
				const params = {
					"pageNum": this.pageNum,
					"pageSize": 20
				}
				if (this.pageNum == 1) {
					this.showDom = false
				}
				protal.queryGuestDirectoryList(params).then(res => {
					this.total = res.total
					this.showDom = true
					this.mlList = this.pageNum == 1 ? res.data : [...this.mlList, ...res.data]

					if (this.scroll) {
						this.scroll.finishPullUp()
					}
				}).catch(err => {
					if (this.scroll) {
						this.scroll.finishPullUp()
					}
				})
			},
			slideTo(index) {
				this.activeIndex = index
				this.$refs.stopSwiper.$el.swiper.slideTo(index)
			},
			back() {
				if (this.$route.query.type === 'sign') {
					location.href = location.origin
					return
				}
				this.backFn()
			},
			exit() {
				this.jsAPI('waitanh5_logoutClick')
				const that = this
				this.showError = true
				// this.$confirm(this.$t('helper9'), this.En ? 'Prompt' : '提示', {
				// 	center: true,
				// 	confirmButtonClass: 'pub-btn btn-big btn108',
				// 	cancelButtonClass: 'pub-btn btn-small btn108',
				// 	customClass: 'el-message-box400',
				// 	confirmButtonText: this.$t('secdetail2-1'),
				// 	cancelButtonText: this.$t('secdetail3'),
				// 	showClose: false,
				// 	beforeClose: (action, instance, done) => {
				// 		if (action == 'confirm') {
				// 			protal.exitLogin().then(res => {
				// 				done()
				// 				localStorage.setItem('token', '')
				// 				location.href = location.origin
				// 			})
				// 		} else {
				// 			done()
				// 		}
				// 	}
				// })
			},
			phoneFn() {
				this.jsAPI('waitanh5_serviceClick')
				const that = this
				this.$confirm('021-22487888', this.$t('helper10'), {
					center: true,
					confirmButtonClass: 'pub-btn btn-big btn100',
					cancelButtonClass: 'pub-btn btn-small btn100',
					customClass: 'el-message-box400 el-message-box-big-content',
					confirmButtonText: this.$t('helper11'),
					cancelButtonText: this.$t('secdetail3'),
					showClose: false,
					beforeClose: (action, instance, done) => {
						if (action == 'confirm') {
							that.jsAPI('waitanh5_callingClick')
							that.$refs.tels.click()
						} else {
							done()
						}
					}
				})
			},
			facilitiesFn() {
				this.jsAPI('waitanh5_FacilitieClick')
				this.$router.push({
					name: 'facilities'
				})
			}
		}
	}
</script>

<style lang="less">
	.voucher8 {
		width: 100%;
		height: 100vh;
		border-radius: 14px;
		overflow: hidden;

		.voucher8-1 {
			width: 100%;
			height: 50px;
			background: linear-gradient(90deg, #1650FF 0%, #7F51D2 100%);
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: AlibabaPuHuiTi_3_65_Medium;
			font-size: 18px;
			color: #FFFFFF;
			line-height: 18px;
			text-align: center;
			font-style: normal;
			position: relative;

			img {
				position: absolute;
				right: 10px;
				top: 10px;
				width: 30px;
				height: 30px;
			}
		}

		.voucher8-content {
			height: 60vh;
			overflow: hidden;
			background: #fff;

			.voucher8-2 {

				.item {
					padding: 14px 20px;
					border-bottom: 1px solid rgba(23, 57, 214, 0.20);

					h3 {
						font-family: AlibabaPuHuiTi_3_65_Medium;
						font-size: 16px;
						color: #000032;
						line-height: 16px;
						text-align: left;
						font-style: normal;
					}

					p {
						font-family: AlibabaPuHuiTi_3_45_Light;
						font-size: 13px;
						color: #000032;
						line-height: 19px;
						text-align: left;
						font-style: normal;
						margin-top: 4px;
					}
				}
			}
		}
	}
</style>


<style lang="less" scoped>
	.search {
		display: flex;
		flex-direction: column;
		height: 100vh;
		overflow: hidden;

		.flex-page {
			overflow: auto;
		}

		.search1 {
			position: relative;
			padding-top: 8px;
			z-index: 1;

			.search1-1 {
				position: absolute;
				left: 0;
				top: 6px;
				padding: 19px;
				font-family: AlibabaPuHuiTi_3_45_Light;
				font-size: 14px;
				color: #999999;
				line-height: 14px;
				font-style: normal;
				z-index: 1;
			}

			.search1-2 {
				font-family: AlibabaPuHuiTi_3_65_Medium;
				font-size: 18px;
				color: #0A0F1A;
				line-height: 48px;
				text-align: center;
				font-style: normal;
				height: 52px;
				position: relative;
				padding: 0 18px;
			}
		}

		.voucher1-time {
			height: 22rpx;
		}

		.voucher1 {
			background-size: cover;
			width: 100%;
			height: 1280rpx;
			padding: 984rpx 0 0 80rpx;
			box-sizing: border-box;
			position: relative;

			.voucher-top {
				position: absolute;
				left: 50%;
				top: 072rpx;
				transform: translateX(-50%);
				padding: 0 33px;
				height: 32px;
				background: linear-gradient(270deg, #FFCF94 0%, #DDB078 100%);
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: AlibabaPuHuiTi_3_85_Bold;
				font-size: 20px;
				color: #fff;
				line-height: 20px;
				text-align: center;
				font-style: normal;
				border-radius: 0 0 30px 30px;
				clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 20px 100%);
			}

			.voucher1-1 {
				width: 484rpx;
				display: flex;

				.item {
					flex: 0 0 368rpx;
					height: 098rpx;

					.small {
						font-family: AlibabaPuHuiTi_3_45_Light;
						font-size: 26rpx;
						color: rgba(1, 1, 1, 0.6);
						line-height: 26rpx;
						font-style: normal;
						white-space: nowrap;
					}

					.big {
						margin-top: 010rpx;
						font-family: AlibabaPuHuiTi_3_65_Medium;
						font-size: 26rpx;
						color: #010101;
						line-height: 36rpx;
						font-style: normal;
						white-space: none;
					}

					&:last-child {
						flex: 0 0 260rpx;
					}
				}
			}

			.voucher1-2 {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				top: 416rpx;
				width: 360rpx;
				height: 360rpx;

				p {
					position: absolute;
					left: -1rem;
					top: -076rpx;
					width: 6rem;
					font-family: AlibabaPuHuiTi_3_85_Bold;
					font-size: 40rpx;
					color: #181818;
					line-height: 40rpx;
					text-align: center;
					font-style: normal;
				}

				.img {
					width: 360rpx;
					height: 360rpx;

					/deep/ img {
						width: 360rpx;
						height: 360rpx;
						padding: 010rpx;
						border-radius: 012rpx;
						background-color: #fff;
					}
				}
			}

			.status {
				padding-right: 72rpx;

				.status-img {
					width: 108rpx;
					height: 108rpx;
					margin: 180rpx auto 0;
				}

				.status-big {
					font-family: AlibabaPuHuiTi_3_65_Medium;
					font-size: 036rpx;
					color: #181818;
					line-height: 040rpx;
					text-align: center;
					font-style: normal;
					margin: 20rpx 0;
				}

				.status-small {
					font-family: AlibabaPuHuiTi_3_45_Light;
					font-size: 026rpx;
					color: #181818;
					line-height: 040rpx;
					text-align: center;
					font-style: normal;
				}
			}

			.voucher1-content {
				position: absolute;
				left: 070rpx;
				right: 070rpx;
				top: 402rpx;

				.voucher3 {
					display: flex;

					.item {
						flex: 1;
						position: relative;

						.text {
							font-family: AlibabaPuHuiTi_3_65_Medium;
							font-size: 028rpx;
							color: #666666;
							line-height: 032rpx;
							text-align: center;
							font-style: normal;
						}

						&.active {

							.text {
								color: #1739D6;
							}

							&::after {
								content: "";
								position: absolute;
								left: 50%;
								transform: translateX(-50%);
								bottom: -012rpx;
								width: 48rpx;
								height: 06rpx;
								background: #1739D6;
								border-radius: 03rpx;
							}
						}
					}
				}

				.voucher4 {
					width: 100%;
					margin: 078rpx auto 023rpx;

					.item {

						h3 {
							font-family: AlibabaPuHuiTi_3_85_Bold;
							font-size: 040rpx;
							color: #181818;
							line-height: 040rpx;
							text-align: center;
							font-style: normal;
							white-space: nowrap;

							&.h3-en {
								font-size: 024rpx;
							}
						}

						p {
							height: 026rpx;
							margin-top: 016rpx;
							margin-bottom: 16rpx;
							font-family: AlibabaPuHuiTi_3_65_Medium;
							font-size: 026rpx;
							color: #666666;
							line-height: 026rpx;
							text-align: center;
							font-style: normal;
						}

						a {
							display: block;
							font-family: AlibabaPuHuiTi_3_65_Medium;
							font-size: 024rpx;
							color: #1739D6;
							line-height: 024rpx;
							text-align: center;
							font-style: normal;
							padding: 004rpx 0;
							text-decoration: none;
						}

						img {
							width: 420rpx;
							height: 420rpx;
							margin: 0 auto;
							display: block;
						}


						.img {
							width: 396rpx !important;
							height: 396rpx !important;
							background: url(https://static.inclusionconf.com/static/images/ewm-border.png);
							background-size: 100% 100%;
							margin: 0 auto;
							padding: 040rpx !important;

							.img1 {
								width: 100%;
								height: 100%;
							}
						}

						&.item2 {

							p {
								margin-bottom: 032rpx;
							}
						}
					}
				}

				.voucher5 {
					display: flex;
					justify-content: center;

					span {
						width: 10rpx;
						height: 10rpx;
						background: #999999;
						margin: 0 2px;
						border-radius: 50%;
						transition: .02s linear;

						&.active {
							width: 40rpx;
							height: 10rpx;
							background: #000032;
							border-radius: 06rpx;
						}
					}
				}
			}
		}

		.voucher6 {
			display: flex;
			justify-content: center;
			margin-top: -044rpx;
			position: relative;
			z-index: 1;
			flex: 1;
			padding: 0 040rpx 068rpx;

			.item {
				flex: 1;
				height: 132rpx;
				text-decoration: none;

				img {
					width: 88rpx;
					height: 88rpx;
					display: block;
					margin: 0 auto;
				}

				p {
					margin-top: 016rpx;
					font-family: AlibabaPuHuiTi_3_65_Medium;
					font-size: 028rpx;
					color: #0A0F1A;
					line-height: 028rpx;
					text-align: center;
					font-style: normal;
				}

				&:last-child {
					border-right: none;
				}
			}
		}

		.voucher7 {
			padding-bottom: 60rpx;
			display: flex;
			justify-content: center;

			span {
				width: 638rpx;
				height: 80rpx;
				border-radius: 40rpx;
				border: 1px solid #84868C;
				font-family: AlibabaPuHuiTi_3_65_Medium;
				font-size: 032rpx;
				color: #000032;
				line-height: 032rpx;
				text-align: center;
				font-style: normal;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.voucher-list {
			margin-bottom: 40px;
			position: relative;
			z-index: 1;
			top: -80rpx;

			.voucher-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 52px;
				border-bottom: 1px solid #E0E0E0;
				width: 670rpx;
				margin: 0 auto;
				box-sizing: content-box;
				
				.left-icon {
					width: 22px;
					height: 22px;
					margin-right: 6px;
					position: relative;
					z-index: 1;
				}

				.left {
					font-family: AlibabaPuHuiTi_3_55_Regular;
					font-size: 16px;
					color: #000000;
					line-height: 16px;
					text-align: left;
					font-style: normal;
					position: relative;
					z-index: 1;
				}
				
				.status {
					font-family: AlibabaPuHuiTi_3_55_Regular;
					font-size: 13px;
					color: #FFFFFF;
					line-height: 19px;
					position: relative;
					z-index: 1;
					font-style: normal;
					margin-right: 10px;
				}
				
				.status1 {
					padding: 0 6px;
					height: 20px;
					background: #000000;
					border-radius: 10px 10px 10px 0px;
					display: flex;
					align-items: center;
					font-family: AlibabaPuHuiTi_3_55_Regular;
					font-size: 13px;
					color: #FFFFFF;
					line-height: 1;
					font-style: normal;
					margin-right: 10px;
					position: relative;
					z-index: 1;
				}

				.icon {
					height: 12px;
					position: relative;
					z-index: 1;
				}
				
				&.active {
					position: relative;
					padding-bottom: 12px;
					
					.left {
						color: #fff;
					}
					
					&:before {
						content: "";
						position: absolute;
						left: -7px;
						right: -7px;
						top: 0;
						bottom: 12px;
						background: #7350F5;
						border-radius: 8px 8px 8px 8px;
					}
				}
			}
		}

		.voucher9 {
			flex: 1;
		}
	}

	.contact-list {

		.contact-item {
			margin-bottom: 34px;

			.title {
				font-family: AlibabaPuHuiTi_3_65_Medium;
				font-size: 18px;
				color: #000000;
				line-height: 18px;
				text-align: center;
				font-style: normal;
			}

			.email {
				font-family: AlibabaPuHuiTi_3_45_Light;
				font-size: 12px;
				color: #1E234B;
				line-height: 12px;
				text-align: center;
				font-style: normal;
				text-decoration-line: underline;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 7px;
				
				.icon {
					margin-left: 4px;
					width: 17px;
				}
			}
		}
	}
	
	.print-mask {
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 6, 50, 0.4);
		z-index: 10;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		
		.print {
			width: 608rpx;
			height: 188rpx;
			border-radius: 28rpx;
			opacity: 1;
			background: #7350F5;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: AlibabaPuHuiTi;
			font-size: 40rpx;
			font-weight: normal;
			letter-spacing: 2px;
			color: #FFFFFF;
	
		}
	}
</style>